<script setup lang="ts">
import { ref } from 'vue'
import { reqBanner, reqCategory, reqHot } from '@/apis/home';
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue';

import { onLoad } from '@dcloudio/uni-app';
import type { BannerItem, CategoryItem, HotItem } from '@/apis/type/home';
import type { XtxGuessInstance } from '@/types/component'


const bannerList = ref<BannerItem[]>([])
const categoryList = ref<CategoryItem[]>([])
const hotList = ref<HotItem[]>([])
const guessRef = ref<XtxGuessInstance>()
// 获取轮播图数据
const getBannerList = async () => {
  const res = await reqBanner()
  bannerList.value = res.result
}

  // 获取分类
const getCategory = async () => {
  const res = await reqCategory()
  categoryList.value = res.result
}
const getHotList = async () => {
  const res = await reqHot()
  hotList.value = res.result
}
const onScrolltolower = () => {
  guessRef.value?.getGuessList()
}
onLoad(() => {
  getBannerList()
  getCategory()
  getHotList()
})

</script>

<template>

  <CustomNavbar />
  <scroll-view scroll-y class="scroll-view" @scrolltolower="onScrolltolower">
    <XtxSwiper :bannerList="bannerList" />
    <CategoryPanel :categoryList="categoryList" />
    <HotPanel :hotList="hotList" />
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>
